<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Document</title>
    </head>
    <body>
        <!-- 1 维护状态 -->
        <!-- 尽可能在使用 v-for 时提供 key attribute 切key之间以用字符串或数值类型 -->
        <div v-for="item in items" v-bind:key="item.id">
            <!-- 内容 -->
        </div>

        <!-- 2 数组更新检测 -->
        <!-- 2.1 变异方法 -->
        <!-- Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹
            过的方法包括：
            push()
            pop()
            shift()
            unshift()
            splice()
            sort()
            reverse() -->
        <!-- 三秒后给数组新增值然后视图更新了 -->
        <ui id="uid">
            <li v-for="item in items">
                {{item.message}}
            </li>
        </ui>

        <!-- 2.2 替换数组 -->
        <!-- 与上面的变异方法相反,一些方法不会改变原有数组而总是返回新数组,例如:
        filter()、concat() 和 slice() -->
        <ui id="uid1">
            <li v-for="item in items">
                {{item.message}}
            </li>
        </ui>

        <!-- 2.3 注意事项 -->
        <!-- 由于JS的限制一些数组的变动VUE检测不到 -->
        <!-- 例如: -->
        <!-- vm.items[indexOfItem] = newValue -->
        <!-- vm.items.length = newLength -->
        <!-- 这是可以使用VUE响应的方法来代替: -->
        <!-- 第一个的替代: -->
        <!-- Vue.set(vm.items, indexOfItem, newValue)等同于
             vm.$set(vm.items, indexOfItem, newValue)
            vm.$set是Vue.set的别名 -->
        <!-- vm.items.splice(indexOfItem, 1, newValue) -->
        <!-- 第二个的替代 -->
        <!-- vm.items.splice(newLength) -->
        <ui id="uid2">
            <li v-for="item in items">
                {{item.message}}
            </li>
        </ui>

        <ui id="uid3">
            <li v-for="(value, name, index) in Object">
                {{index}}--{{name}}--{{value}}
            </li>
        </ui>

        <script>
            var vm = new Vue({
                el: '#uid',
                data: {
                    items: [{ message: 'Jack' }, { message: 'Rose' }],
                },
            });
            setTimeout(() => {
                vm.items.push({ message: 'shop' });
            }, 3000);

            var vm1 = new Vue({
                el: '#uid1',
                data: {
                    items: [{ message: 'black' }, { message: 'white' }],
                },
            });
            setTimeout(() => {
                vm1.items = vm1.items.filter(item => {
                    return item.message.match(/white/);
                });
            }, 3000);

            var vm2 = new Vue({
                el: '#uid2',
                data: {
                    items: [{ message: 'ping' }, { message: 'pang' }],
                },
            });
            setTimeout(() => {
                // vm.items[1] = 'ball'
                Vue.set(vm2.items, 1, { message: 'green' });
                // vm2.$set(vm2.items, 1, { message: 'green' })
            }, 3000);

            var vm3 = new Vue({
                el: '#uid3',
                data: {
                    Object: { name: '新冠', area: '湖北' },
                },
            });
            setTimeout(() => {
                // vm.items[1] = 'ball'
                // Vue.set(vm2.items, 1, {message: 'green'})
                vm3.$set(vm3.Object, 'area', '武汉');
            }, 3000);
        </script>
    </body>
</html>
